<template>
  <div class="all_into_page page_scroll">

    <!-- 搜索区域 开始 -->
    <div class="search_box">
      <el-form :model="searchForm" :inline="true" size="small">
        <el-form-item label="姓名：">
          <el-input v-model="searchForm.name"></el-input>
        </el-form-item>
        <el-form-item label="电话：">
          <el-input v-model="searchForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="searchForm.progress">
            <el-option v-for="(item,index) in BEHINDSTATUSLIST" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="未跟进时间：">
          <el-input v-model="searchForm.noProcessDay"></el-input>
        </el-form-item>
        <el-form-item label="查询日期：">
          <el-date-picker v-model="searchForm.searchTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 搜索区域 end -->

    <!-- 操作区域 开始 -->
    <div class="link_groups">
      <el-button type="primary" size="small" :disabled="!checkList || checkList.length<=0" @click="openDialog">分配</el-button>
    </div>
    <!-- 操作区域 end -->

    <!-- 列表区域 开始 -->
    <div class="">
      <el-table ref="elTable" class="el_table" :data="dataList" border @selection-change="onTableChange">
        <el-table-column type="selection" width="46" align="center" />
        <el-table-column label="序号" type="index" width="54"></el-table-column>
        <el-table-column label="姓名" prop="name" :width="sortTdWidth">
          <template slot-scope="{row}">{{row.customer?row.customer.name:''}}</template>
        </el-table-column>
        <el-table-column label="电话" prop="mobile" :width="smallWidth">
          <template slot-scope="{row}">{{row.customer?row.customer.mobile:''}}</template>
        </el-table-column>
        <el-table-column label="性别" prop="sex" :width="sortTdWidth">
          <template slot-scope="{row}">{{SEXTYPELIST[row.customer?row.customer.sex:'']}}</template>
        </el-table-column>
        <el-table-column label="年龄" prop="age" :width="sortTdWidth">
          <template slot-scope="{row}">{{row.customer?row.customer.age:''}}</template>
        </el-table-column>
        <el-table-column label="进度" prop="process" :width="sortTdWidth">
          <template slot-scope="{row}">{{SHOWBEHINDSTATUSLIST[row.process]}}</template>
        </el-table-column>
        <el-table-column label="备注资料" prop="info"></el-table-column>
        <el-table-column label="跟进记录" prop="" :width="longTdWidth">
          <template slot-scope="{row}">
            <el-popover placement="left-end" trigger="hover" width="500">
              <div class="remarkBox">
                <div class="remarkList">
                  <div class="item mb-3" v-for="(item,index) in row.remarkList" :key="index">
                    <div class="remark">{{item.remark}}</div>
                    <div class="createBy pl-3">{{item.createBy}}</div>
                    <div class="updateDate ml-3">{{item.updateDate}}</div>
                  </div>
                </div>
              </div>
              <div class="remarkList" slot="reference">
                <div class="item" :class="{hide:index>2}" v-for="(item,index) in row.remarkList" :key="index">
                  <div class="remark">{{cutWordLength(item.remark,'17') }}</div>
                  <div class="createBy pl-3">{{item.createBy}}</div>
                  <div class="updateDate ml-3">{{item.updateDate}}</div>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="未跟进时间" prop="noProcessDay"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" :id="row.id" @click="followUpHandle(row)">查看跟进资料</el-button>
          </template>
        </el-table-column>
      </el-table>
      <BasePagination v-model="page" :total="totalCount" @change="pageOnChange" />
    </div>
    <!-- 列表区域 end -->

    <!-- 分配弹框 开始 -->
    <glsx-dialog :show="showDialog" title="分配" @close="closeDialog()">
      <div>
        <allot-staff v-if="showDialog" :list="checkList" @change="onChange"></allot-staff>
      </div>
    </glsx-dialog>
    <!-- 分配弹框 end -->

    <!-- 跟进弹框 开始 -->
    <glsx-dialog title="跟进" width="60%" :show="dialogFormVisible" @close="closeFollowDialog()">
      <follow-up ref="followUpCom" v-if="dialogFormVisible" :data="selectItem" @change="onFollowChange"></follow-up>
      <div slot="footer">
        <el-button type="primary" size="small" :loading="updateLoading" @click="updateCustomer()">保存</el-button>
        <el-button type="default" size="small" @click="closeFollowDialog()">取消</el-button>
      </div>
    </glsx-dialog>
    <!-- 跟进弹框 end -->

  </div>
</template>
<script>
import { deepClone } from '@/utils/util'
import { GETBEHINDALLCUSTOMERLIST } from '@/api/customer'
import { BEHINDSTATUSLIST, SHOWBEHINDSTATUSLIST, SEXTYPELIST } from '@/common/constants'
import GlsxDialog from '@/components/Dialog'
import AllotStaff from '@/components/allot'
import FollowUp from '@/components/follow/behindFollow'
export default {
  components: {
    GlsxDialog,
    AllotStaff,
    FollowUp
  },
  data() {
    return {
      searchForm: {},
      page: 1,
      pageSize: 100,
      dataList: [],
      totalCount: 0,
      BEHINDSTATUSLIST,
      SHOWBEHINDSTATUSLIST,
      sortTdWidth: 56,
      smallWidth: 110,
      tdWidth: 160,
      longTdWidth: 500,
      showDialog: false,
      checkList: [],
      selectItem: {},
      dialogFormVisible: false,
      updateLoading: false,
      SEXTYPELIST
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 分页切换事件
    pageOnChange(row) {
      this.page = row.page;
      if (row.pageSize) {
        this.pageSize = row.pageSize;
      }
      this.getList();
    },

    // 获取参数
    getParams() {
      const oParams = {}
      const o = deepClone(this.searchForm)
      const m = o.searchTime
      if (m && m.length > 0) {
        o.startDate = m[0]
        o.endDate = m[1]
      }
      delete o.searchTime
      oParams.size = this.pageSize
      oParams.paramObject = o
      return oParams
    },

    // 获取列表
    getList(current) {
      const oParams = this.getParams()
      oParams.page = current || this.page
      GETBEHINDALLCUSTOMERLIST(oParams).then((res) => {
        const obj = res.data || {}
        this.dataList = obj.dataList || []
        this.totalCount = obj.totalCount
      })
    },

    // 打开弹框
    openDialog() {
      this.showDialog = true
    },

    // 关闭弹框
    closeDialog() {
      this.showDialog = false
    },

    // 监听表格选中
    onTableChange(selection) {
      console.log(selection)
      this.checkList = selection
    },

    // 监听组件变化
    onChange(e) {
      this.showDialog = false
      if (e) {
        this.getList()
      }
    },

    // 跟进
    followUpHandle(item) {
      this.selectItem = Object.assign(item, item.customer)
      this.dialogFormVisible = true
    },

    // 关闭弹框
    closeFollowDialog() {
      this.dialogFormVisible = false
    },

    // 监听组件变化
    onFollowChange(e) {
      this.updateLoading = false
      if (e) {
        this.closeFollowDialog()
        this.getList()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.all_into_page {
  padding: 20px;
  .show_tips {
    font-size: 14px;
    color: #666;
    line-height: 2;
    margin: 10px 0;
  }
}
</style>
